<template>
	<div class="auditIndexContent">
		<div class="strategyMenus">
			<div class="strategyMenusBut">
				<!-- <wj-Button type="save" @click="handleExport_select">批量导出</wj-Button> -->
				<el-date-picker
					v-model="exportLogsTimeHorizonValue"
					:picker-options="pickerOptions"
					format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="selectExportLogsTimeHorizonValueEvent"
				>
				</el-date-picker>
				<!-- <wj-Button type="save" @click="handleExport_all">全部导出</wj-Button> -->
				<wj-Button type="save" @click="handleExport">导出</wj-Button>
			</div>
			<div class="strategyMenusSearch">
				<el-input
					placeholder="请输关键字检索"
					type="text"
					v-model="searchValue"
					@keyup.enter.native="
						(e) => {
							e.target.blur();
						}
					"
					@blur="searchEvent"
				></el-input>
			</div>
		</div>
		<div class="strategyList">
			<el-table
				:data="tableData"
				ref="table_publishContent"
				:row-key="getRowKeys"
				style="width: 100%"
				@selection-change="handleSelectionChange"
				:row-class-name="'tableRowClassName'"
			>
				<el-table-column type="selection" width="80" label="序号" :reserve-selection="true"> </el-table-column>
				<el-table-column prop="type" label="日志类别" sortable width="180"> </el-table-column>
				<el-table-column prop="module" label="日志模块" width="180"> </el-table-column>
				<el-table-column prop="content" label="日志内容" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="ip" label="用户登录IP" width="180"> </el-table-column>
				<el-table-column prop="operateTime" label="发生时间" width="180"> </el-table-column>
				<el-table-column prop="result" label="操作结果" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.result == 0">成功</span>
						<span v-if="scope.row.result == 1">失败</span>
					</template>
				</el-table-column>
				<el-table-column prop="operateName" label="操作人员" width="180"> </el-table-column>
				<el-table-column label="操作" width="80">
					<template slot-scope="scope">
						<el-link type="primary" @click="handleRowDetails(scope.$index, scope.row)">查看</el-link>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="strategyPage">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[11]"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>
		<!-- 自定义alertBox弹框——详情 -->
		<AlertBox :alertBoxVisible="alertBoxIssueVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>内部审计详情</p>
					<i class="wj-icon-guanbi" @click="alertBoxIssueclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_details">
						<span>日志类别</span>
						<span>{{ insideDetails.logType }}</span>
					</div>
					<div class="infoRow_details">
						<span>日志模块</span>
						<span>{{ insideDetails.logModule }}</span>
					</div>
					<div class="infoRow_details">
						<span>日志内容</span>
						<span>{{ insideDetails.logContent }}</span>
					</div>
					<div class="infoRow_details">
						<span>发生时间</span>
						<span>{{ insideDetails.logStartTime }}</span>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="handleDetailsConfirm">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import { inside_all, auditIndex_export_inside } from "@/utils/request/api";
export default {
	name: "InsideIndex",
	data() {
		return {
			// 搜索
			searchValue: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据
			tableData:[],
			multipleSelection: [],
			// 自定义弹窗控制——详情
			alertBoxIssueVisible: false,
			// 内部审计详情
			insideDetails: {
				logType: "",
				logModule: "",
				logContent: "",
				logStartTime: "",
			},
			exportLogsTimeHorizonValue: [], // 导出日志时间范围
			pickerOptions: {
				disabledDate(time) {
					// 禁止选择未来的时间
					return (time.getTime() - (24 * 60 * 60 * 1000)) > Date.now();
				},
			},
		};
	},
	created() {},
	mounted() {
		this.getAllInside(this.pageNum, this.pageSize, "", "");
	},
	methods: {
		// 时间控件事件
		selectExportLogsTimeHorizonValueEvent(date) {
			if (date != null && date != undefined && date.length > 0) {
				this.getAllInside(this.pageNum, this.pageSize, date[0], date[1]);
			} else {
				this.getAllInside(this.pageNum, this.pageSize, "", "");
			}
		},
		// table行数据的 Key （用来缓存选中数据）
		getRowKeys(row) {
			return row.id;
		},
		// 搜索
		searchEvent() {
			console.log(this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.getSearchInside(this.pageNum, this.pageSize, this.searchValue, "", "");
			this.searchValue = "";
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.searchValue != "" && this.exportLogsTimeHorizonValue.length <= 0) {
				this.getSearchInside(val, this.pageSize, this.searchValue, "", "");
			} else if (this.searchValue != "" && this.exportLogsTimeHorizonValue.length > 0) {
				this.getSearchInside(val, this.pageSize, this.searchValue, this.exportLogsTimeHorizonValue[0], this.exportLogsTimeHorizonValue[1]);
			} else if (this.exportLogsTimeHorizonValue.length > 0) {
				this.getAllInside(val, this.pageSize, this.exportLogsTimeHorizonValue[0], this.exportLogsTimeHorizonValue[1]);
			} else {
				this.getAllInside(val, this.pageSize, "", "");
			}
		},
		// 表格选中
		handleSelectionChange(val) {
			this.multipleSelection = val;
			console.log(this.multipleSelection);
		},
		// 详情
		handleRowDetails(index, row) {
			console.log(index, row);
			this.alertBoxIssueVisible = true;
			this.insideDetails.logType = row.type;
			this.insideDetails.logModule = row.module;
			this.insideDetails.logContent = row.content;
			this.insideDetails.logStartTime = row.operateTime;
		},
		// alertBox——详情 关闭
		alertBoxIssueclose() {
			this.alertBoxIssueVisible = false;
		},
		// alertBox——详情 确认
		handleDetailsConfirm() {
			this.alertBoxIssueVisible = false;
		},
		// 获取所有内部审计
		getAllInside(page, size, startDateStr, endDateStr) {
			inside_all({
				page: page,
				size: size,
				startDateStr: startDateStr,
				endDateStr: endDateStr,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
			});
		},
		// 搜索内部审计
		getSearchInside(page, size, value, startDateStr, endDateStr) {
			inside_all({
				page: page,
				size: size,
				keyword: value,
				startDateStr: startDateStr,
				endDateStr: endDateStr,
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.result;
				this.total = res.data.total;
			});
		},
		// 批量导出
		handleExport_select() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(decodeURIComponent(idList));
				auditIndex_export_inside({
					internalAuditIdList: decodeURIComponent(idList),
				})
					.then((res) => {
						console.log(res);
						// if (res.code == 200) {
						this.$msg.success("内部审计批量导出成功！");
						let content = res.data;
						let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
						let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
						if ("download" in document.createElement("a")) {
							// 非IE下载
							let elink = document.createElement("a");
							elink.download = fileName;
							elink.style.display = "none";
							elink.href = URL.createObjectURL(blob);
							document.body.appendChild(elink);
							elink.click();
							URL.revokeObjectURL(elink.href); // 释放URL 对象
							document.body.removeChild(elink);
						} else {
							// IE10+下载
							navigator.msSaveBlob(blob, fileName);
						}
						// } else {
						// 	this.$msg.error("内部审计批量导出失败！");
						// }
					})
					.catch((err) => {
						console.log(err);
						this.$msg.error("内部审计批量导出失败！");
					});
			}
		},
		// 全部导出
		handleExport_all() {
			if (this.tableData == null || this.tableData.length <= 0) {
				this.$msg.warning("暂无可导出的数据！");
			} else {
				auditIndex_export_inside({
					internalAuditIdList: decodeURIComponent([]),
				})
					.then((res) => {
						console.log(res);
						// if (res.code == 200) {
						this.$msg.success("内部审计全部导出成功！");
						let content = res.data;
						let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
						let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
						if ("download" in document.createElement("a")) {
							// 非IE下载
							let elink = document.createElement("a");
							elink.download = fileName;
							elink.style.display = "none";
							elink.href = URL.createObjectURL(blob);
							document.body.appendChild(elink);
							elink.click();
							URL.revokeObjectURL(elink.href); // 释放URL 对象
							document.body.removeChild(elink);
						} else {
							// IE10+下载
							navigator.msSaveBlob(blob, fileName);
						}
						// } else {
						// 	this.$msg.error("内部审计全部导出失败！");
						// }
					})
					.catch((err) => {
						console.log(err);
						this.$msg.error("内部审计全部导出失败！");
					});
			}
		},
		// 导出
		handleExport() {
			if (this.tableData == null || this.tableData.length <= 0) {
				this.$msg.warning("暂无可导出的数据！");
			} else {
				if (this.multipleSelection.length <= 0 && this.exportLogsTimeHorizonValue.length <= 0) {
					// 导出全部
					auditIndex_export_inside({
						internalAuditIdList: decodeURIComponent([]),
						startDateStr: "",
						endDateStr: "",
					})
						.then((res) => {
							console.log(res);
							// if (res.code == 200) {
							this.$msg.success("内部审计全部导出成功！");
							this.actualDownload(res);
						})
						.catch((err) => {
							console.log(err);
							this.$msg.error("内部审计导出失败！");
						});
				}
        else if (this.multipleSelection.length <= 0 && this.exportLogsTimeHorizonValue.length > 0) {
					// 时间范围导出
					auditIndex_export_inside({
						internalAuditIdList: decodeURIComponent([]),
						startDateStr: this.exportLogsTimeHorizonValue[0],
						endDateStr: this.exportLogsTimeHorizonValue[1],
					})
						.then((res) => {
							console.log(res);
							this.$msg.success("内部审计时间范围内数据导出成功！");
							this.exportLogsTimeHorizonValue = [];
							this.actualDownload(res);
						})
						.catch((err) => {
							console.log(err);
							this.$msg.error("内部审计导出失败！");
						});
				}
        else if (this.multipleSelection.length > 0 && this.exportLogsTimeHorizonValue.length <= 0) {

					// 选中导出
					var idList = [];
					this.multipleSelection.forEach((item) => {
						idList.push(item.id);
					});
					auditIndex_export_inside({
						internalAuditIdList: decodeURIComponent(idList),
						startDateStr: "",
						endDateStr: "",
					})
						.then((res) => {
							this.$msg.success("内部审计选中数据导出成功！");
							this.$refs.table_publishContent.clearSelection();
							this.multipleSelection = [];
							this.actualDownload(res);
						})
						.catch((err) => {
							console.log(err);
							this.$msg.error("内部审计导出失败！");
						});
				}
        else if (this.multipleSelection.length > 0 && this.exportLogsTimeHorizonValue.length > 0) {
					// 时间范围内选中导出
					var idList_ = [];
					this.multipleSelection.forEach((item) => {
						idList_.push(item.id);
					});
					auditIndex_export_inside({
						internalAuditIdList: decodeURIComponent(idList_),
						startDateStr: this.exportLogsTimeHorizonValue[0],
						endDateStr: this.exportLogsTimeHorizonValue[1],
					})
						.then((res) => {
							console.log(res);
							this.$msg.success("内部审计时间范围内选中数据导出成功！");
							this.exportLogsTimeHorizonValue = [];
							this.$refs.table_publishContent.clearSelection();
							this.multipleSelection = [];
							this.actualDownload(res);
						})
						.catch((err) => {
							console.log(err);
							this.$msg.error("内部审计导出失败！");
						});
				}
			}
		},
		// 实际下载
		actualDownload(res) {
			let content = res.data;
			let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
			let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
			if ("download" in document.createElement("a")) {
				// 非IE下载
				let elink = document.createElement("a");
				elink.download = fileName;
				elink.style.display = "none";
				elink.href = URL.createObjectURL(blob);
				document.body.appendChild(elink);
				elink.click();
				URL.revokeObjectURL(elink.href); // 释放URL 对象
				document.body.removeChild(elink);
			} else {
				// IE10+下载
				navigator.msSaveBlob(blob, fileName);
			}
			// 重新查询
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.getAllInside(this.pageNum, this.pageSize, "", "");
		},
	},
};
</script>
<style lang="less" scoped>
.auditIndexContent {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.strategyMenus {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.strategyMenusBut {
			width: 85%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 18px;
				margin-left: 18px;
				margin-right: 45px;
			}
		}
		.strategyMenusSearch {
			width: 15%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			/deep/ .el-input {
				font-size: 16px;
			}
		}
	}
	.strategyList {
		width: 100%;
		height: calc(100% - 48px - 48px);
		padding: 28px 0;
		box-sizing: border-box;
		/deep/ .el-table {
			border-left: 1px solid #ebeef5;
			border-right: 1px solid #ebeef5;
			border-top: 1px solid #ebeef5;
		}
		/deep/ .el-link {
			margin: 0 12px 0 0;
		}
	}
	.strategyPage {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
